<template>
  <div class="nav-back">
    <div class="nav-main">
      <h1>全部商品分类</h1>
      <nav>
        <ul>
          <li>
            <a href="javascript:;">服装城</a>
          </li>
          <li>
            <a href="javascript:;">美妆馆</a>
          </li>
          <li>
            <a href="javascript:;">尚品汇超市</a>
          </li>
          <li>
            <a href="javascript:;">全球购</a>
          </li>
          <li>
            <a href="javascript:;">闪购</a>
          </li>
          <li>
            <a href="javascript:;">团购</a>
          </li>
          <li>
            <a href="javascript:;">有趣</a>
          </li>
          <li>
            <a href="javascript:;">秒杀</a>
          </li>
        </ul>
      </nav>
      <div class="sort">
        <div class="sort-container" @click="goSearch">
          <div
            class="sort-list-first"
            v-for="c1 in categoryList"
            :key="c1.categoryid"
          >
            <h3>
              <a
                :data-categoryName="c1.categoryName"
                :data-level="1"
                :data-categoryId="c1.categoryId"
              >
                {{ c1.categoryName }}
              </a>
            </h3>
            <div class="sort-list-second">
              <div
                class="sort-list-show"
                v-for="c2 in c1.categoryChild"
                :key="c2.categoryid"
              >
                <dl class="lettle">
                  <dt class="lettle-title">
                    <a
                      :data-categoryName="c2.categoryName"
                      :data-level="2"
                      :data-categoryId="c2.categoryId"
                      >{{ c2.categoryName }}</a
                    >
                  </dt>
                  <dd class="lettle-content">
                    <span v-for="c3 in c2.categoryChild" :key="c3.categoryid">
                      <a
                        :data-categoryName="c3.categoryName"
                        :data-level="3"
                        :data-categoryId="c3.categoryId"
                        >{{ c3.categoryName }}</a
                      >
                    </span>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Nav",
  mounted() {
    this.getCategoryList();
  },
  data() {
    return {
      isShow: false,
    };
  },
  computed: {
    ...mapState("home", ["categoryList"]),
  },
  methods: {
    ...mapActions("home", ["getCategoryList"]),
    goSearch(e) {
      const {
        categoryname: categoryName,
        level,
        categoryid: categoryId,
      } = e.target.dataset;
      if (!level) return;
      this.$router.history.push({
        name: "Search",
        query: {
          categoryName,
          [`category${level}id`]: categoryId,
        },
        params: this.$route.params,
      });
        // console.log(this);
    },
  },
};
</script>
<style lang="less" scoped>
.pa(@a,@b) {
  position: absolute;
  top: ~"@{a}px";
  left: ~"@{b}px";
}
.hl(@a) {
  line-height: ~"@{a}px";
  height: ~"@{a}px";
}
.fp(@a,@b,@c,@d) {
  float: left;
  padding: ~"@{a}px" ~"@{b}px" ~"@{c}px" ~"@{d}px";
}
//css
.nav-back {
  width: 100%;
  min-width: 1200px;
  border-bottom: 2px solid #e1251b;
}

.nav-main {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  position: relative;
  h1 {
    .hl(45);
    width: 210px;
    text-align: center;
    background-color: #e1251b;
    color: #fff;
    font-size: 14px;
  }
  ul {
    .hl(45);
    display: flex;
    font-size: 16px;
    li {
      a {
        padding: 0 20px;
        color: #333;
      }
      a:hover {
        color: rgb(116, 116, 134);
      }
    }
  }
}
.sort {
  .pa(45,0);
  width: 210px;
  height: 461px;
  background: #fafafa;
  z-index: 4;
  .sort-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .sort-list-first {
    flex-grow: 1;
    padding-top: 4.4px;
    &:hover {
      background-color: #bfa;
    }
    h3 {
      font: 14px lighter;
      padding-left: 20px;
    }
    .sort-list-second {
      .pa(0,210);
      width: 735px;
      min-height: 460px;
      border: 1px solid #ddd;
      display: none;
      background-color: #f7f7f7;
      z-index: 4;
      .sort-list-show {
        .fp(0,10,0,10);
        width: 650px;
        dl {
          padding: 6px 0;
          display: flow-root;
          dt {
            .fp(3,3,0,0);
            line-height: 22px;
            width: 54px;
            text-align: right;
            font-weight: bolder;
          }
          dd {
            .fp(3,0,0,0);
            width: 550px;
            span {
              .fp(0,8,0,8);
              .hl(14);
              margin-top: 5px;
              border-left: 1px solid #ccc;
            }
          }
        }
      }
    }
    &:hover .sort-list-second {
      display: block;
    }
  }
}
</style>